#include("./_layout.html")
#@layout()
#define content()
<div class="container">
    <div class="row">
        <div class="col-9">
            <h3 class="bl-artical-title">#(article.title ??)</h3>
            <div class="bl-label">
                <div class="bl-label-item">
                    <img src="img/zheng.jpg" class="img-fluid rounded-circle bl-img-size" alt="Responsive image">
                    <span class="text-success">海哥</span>
                </div>
                <div class="bl-label-item">2017-10-01 18:00</div>
            </div>
            <div class="bl-artical">
                #(article.content ??)
            </div>

            #relevantArticles(article)
            <div class="recommend-panel">
                <h4 class="bl-title">相关文章</h4>
                <div class="card-deck">
                    #for(article :relevantArticles )
                    <div class="card">
                        <a href="#articleUrl(article)">
                            <div class="recommend-panel-top">
                                <img src="img/product-example.jpg" class="img-fluid">
                            </div>
                            <div class="recommend-panel-bottom">
                                #(article.title ??)
                            </div>
                        </a>
                    </div>
                    #end
                </div>
            </div>
            #end


            <div class="comment">
                <h4 class="bl-title">学员评价</h4>
                <form>
                    <div class="form-group">
                        <textarea class="form-control" placeholder="想说就说吧..." id="exampleFormControlTextarea1"
                                  rows="5"></textarea>
                    </div>
                    <button type="button" class="btn btn-primary float-right">发表</button>
                    <span class="clearfix"></span>
                </form>

                <div class="comment-panel border-bottom">
                    <div class="comment-panel-portrait">
                        <img src="img/zheng.jpg" class="img-fluid rounded-circle bl-portrait-size"
                             alt="Responsive image">
                    </div>
                    <div class="comment-panel-content">
                        <div class="comment-panel-content-item">
                            <div>海哥</div>
                            <div class="bl-text-secondary">2017-10-01 18:00</div>
                        </div>
                        <div class="comment-panel-content-main bl-md-size">我上传的是FTP，怎么安装？</div>
                    </div>
                    <span class="clearfix"></span>
                    <div class="text-right text-primary"><a href="">回复</a></div>
                </div>

                <div class="comment-panel clearfix border-bottom">
                    <div class="comment-panel-portrait">
                        <img src="img/zheng.jpg" class="img-fluid rounded-circle bl-portrait-size"
                             alt="Responsive image">
                    </div>
                    <div class="comment-panel-content">
                        <div class="comment-panel-content-item">
                            <div>海哥</div>
                            <div class="bl-text-secondary">2017-10-01 18:00</div>
                        </div>

                        <div class="comment-panel-secondary">
                            <p class="text-info">引用来自于 <span>你要走到那里去</span> 的内容</p>
                            <p>稍等，我看看</p>
                        </div>
                        <div class="comment-panel-content-main bl-md-size">我上传的是FTP，怎么安装？</div>
                    </div>
                    <span class="clearfix"></span>
                    <div class="text-right text-primary"><a href="">回复</a></div>
                </div>
                <div class="comment-panel">
                    <div class="comment-panel-portrait">
                        <img src="img/zheng.jpg" class="img-fluid rounded-circle bl-portrait-size"
                             alt="Responsive image">
                    </div>
                    <div class="comment-panel-content">
                        <div class="comment-panel-content-item">
                            <div>海哥</div>
                            <div class="bl-text-secondary">2017-10-01 18:00</div>
                        </div>
                        <div class="comment-panel-content-main bl-md-size">我上传的是FTP，怎么安装？</div>
                    </div>
                    <span class="clearfix"></span>
                    <div class="text-right text-primary"><a href="">回复</a></div>
                </div>
                <div class="comment-panel">
                    <div class="comment-panel-portrait">
                        <img src="img/zheng.jpg" class="img-fluid rounded-circle bl-portrait-size"
                             alt="Responsive image">
                    </div>
                    <div class="comment-panel-content">
                        <div class="comment-panel-content-item">
                            <div>海哥</div>
                            <div class="bl-text-secondary">2017-10-01 18:00</div>
                        </div>
                        <div class="comment-panel-content-main bl-md-size">我上传的是FTP，怎么安装？</div>
                    </div>
                    <span class="clearfix"></span>
                    <div class="text-right text-primary"><a href="">回复</a></div>
                </div>
                <div class="comment-panel">
                    <div class="comment-panel-portrait">
                        <img src="img/zheng.jpg" class="img-fluid rounded-circle bl-portrait-size"
                             alt="Responsive image">
                    </div>
                    <div class="comment-panel-content">
                        <div class="comment-panel-content-item">
                            <div>海哥</div>
                            <div class="bl-text-secondary">2017-10-01 18:00</div>
                        </div>
                        <div class="comment-panel-content-main bl-md-size">我上传的是FTP，怎么安装？</div>
                    </div>
                    <span class="clearfix"></span>
                    <div class="text-right text-primary"><a href="">回复</a></div>
                </div>
                <div class="comment-panel">
                    <div class="comment-panel-portrait">
                        <img src="img/zheng.jpg" class="img-fluid rounded-circle bl-portrait-size"
                             alt="Responsive image">
                    </div>
                    <div class="comment-panel-content">
                        <div class="comment-panel-content-item">
                            <div>海哥</div>
                            <div class="bl-text-secondary">2017-10-01 18:00</div>
                        </div>
                        <div class="comment-panel-content-main bl-md-size">我上传的是FTP，怎么安装？</div>
                    </div>
                    <span class="clearfix"></span>
                    <div class="text-right text-primary"><a href="">回复</a></div>
                </div>
            </div>
        </div>
        <div class="col-3">
            <div class="card-right">
                #articles()
                <h4 class="bl-title">热门文章</h4>
                #for(article : articles)
                <div class="card-right-body">
                    <img src="img/product-example.jpg" class="img-fluid">
                    <p>#(article.title ??)</p>
                </div>
                #end
            </div>
            #end
        </div>
    </div>
</div>
#end